<template>
  <view class="wrap">
   <!-- 头部导航 -->
   <top-tabtar tabTitle="我要推广"  @backClick="backClick" backColor="#6732B8"/>
	 <view class="main">
		<view class="title">分享免费拿 <text style="color: #FF4747;"> VIP</text></view>
		<view class="code-box">
			<view class="code-titel">啵客视频</view>
			<tki-qrcode
				ref="qrcode"
			  :showLoading="false"
				:size="300"
			 	:loadMake="true"
			 	:val="codeData.code"
				:onval="true"
				@result="result"
			  />
			<view class="code-num">{{codeData.code}}</view>
			<view class="link">您的邀请链接</view>
		</view>
		<view class="footer">
			<view class="save-btn" @click="saveCode">保存二维码</view>
			<view class="share-btn" @click="$refs.popup.open()">我要分享</view>
		</view>
	 </view>
	 <!-- 分享 -->
	 <uni-popup  ref="popup" type="bottom">
	 	<view class="popup-main">
	 		<view class="title">分享到</view>
	 		<view class="img-list">
	 			<view v-for="(item,index) in shareList" :key="item.id" class="img-name-box" @click="clickSearc">
	 				<image class="img" :src="item.url"></image>
	 				<view class="name">{{item.name}}</view>
	 			</view>
	 		</view>
	 		<view class="footer-btn" @click="$refs.popup.close()">取消</view>
	 	</view>
	 </uni-popup>
  </view>
</template>

<script>
	import topTabtar from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '../../network/api.js'
	import { pathToBase64, base64ToPath } from '@/components/mmmm-image-tools/index.js'
  export default {
		components: { topTabtar },
    data() {
      return {
				shareList: [
					{ id: 7, name: "复制链接", url: '../../static/home/copylink.png'}
				],
				codeImg: '',
				codeData: {
					code:'',
					promotionLink:''
				}
			}
    },
  onLoad() {
		this.getCode()
	},
  methods: {
		// 分享
		clickSearc(index) {
			const vm = this
				uni.setClipboardData({
				    data: vm.codeData.promotionLink,
				    success: function () {
				      uni.showToast({	title:'复制成功',icon:'none' })
							 vm.$refs.popup.close()
				    }
				})
		},
		// 保存二维码
		saveCode() { 
			const vm = this
			uni.saveImageToPhotosAlbum({
			filePath: vm.codeImg,
			success: function () {
					uni.showToast({
							title:"保存成功",
							icon:"success"
					})
			 }
		})
		},
		// 二维码临时地址
		result(res) {
			this.codeImg = res
		},
		// 获取二维码
		async getCode() {
			const res = await $POST("/boke-user/extension/promotionLink")
			this.codeData.code = res.data.code
			this.codeData.promotionLink = res.data.promotionLink
		},
		saveBase64Img(base64) {
		    const bitmap = new plus.nativeObj.Bitmap('test');
		    bitmap.loadBase64Data(
		        base64,
		        function() {
		            const url = '_doc/' + new Date() + '.png'; // url建议用时间戳命名方式
		            console.log('url:', url);
		            bitmap.save(
		                url,
		                {
		                    overwrite: true // 是否覆盖
		                    // quality: 'quality'  // 图片清晰度
		                },
		                i => {
		                    uni.saveImageToPhotosAlbum({
		                        filePath: url,
		                        success: function() {
		                            console.log('保存成功');
		                            bitmap.clear();
		                        }
		                    });
		                },
		                e => {
		                    console.log('保存失败', e);
		                    bitmap.clear();
		                }
		            );
		        },
		        e => {
		            console.log('保存失败', e);
		            bitmap.clear();
		        }
		    );
		},
		// 返回上一页
		backClick() {
			uni.navigateBack({
			    delta: 1
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		.main{
			margin-top: 120rpx;
			text-align: center;
			.title{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.code-box{
				width: 556rpx;
				height: 566rpx;
				background: #EFE4FF;
				border-radius: 10rpx;
				margin: 56rpx auto;
				text-align: center;
				overflow: hidden;
				.code-titel{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin: 60rpx 0 27rpx 0;
				}
				.img{
					width: 289rpx;
					height: 289rpx;
					background: #101010;
				}
				.code-num{
					font-size: 50rpx;
					font-family: Arial;
					font-weight: 600;
					color: #333333;
					
				}
				.link{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(#FF7900 , 0.6);
				}
			}
			.footer{
				display: flex;
				justify-content: space-around;
				align-items: center;
				.save-btn{
					width: 288rpx;
					height: 88rpx;
					border: 2rpx solid #6732B8;
					border-radius: 44rpx;
					line-height: 44px;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #6732B8;
				}
				.share-btn{
					width: 288rpx;
					height: 88rpx;
					background: #6732B8;
					border-radius: 44rpx;
					line-height: 44px;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		// 弹窗
		.popup-main{
			width: 100%;
			// height: 524rpx;
			background: #FFFFFF;
			padding: 0 40rpx;
			box-sizing: border-box;
			// margin-bottom: env(safe-area-inset-bottom);
			padding-bottom: 30rpx;
			.title{
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #828282;
				padding: 20rpx 0;
				text-align: center;
			}
			.img-list{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 30rpx;
				.img-name-box:nth-child(4n) {
					margin-right:0 !important;
				}
				.img-name-box{
					margin: 0 90rpx 30rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.img{
						width: 82rpx;
						height: 82rpx;
					}
					.name{
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #828282;
						margin-top: 18rpx;
					}
				}
			}
			.footer-btn{
				width: 100%;
				height: 91rpx;
				background: linear-gradient(90deg, #B83DF1, #852CAE);
				border-radius: 10rpx;
				line-height: 91rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto;
				box-sizing: border-box;
				// margin-top: 30rpx;
				margin-bottom:  env(safe-area-inset-bottom);
			}
		}
	}
</style>
